<template>
  <div class="recordDetail" v-if="props.showDialog">
    <Dialog
      diaTop="3"
      headerName="更换记录"
      :showDialog="true"
      @close="close"
      @save="save"
      saveLetter="保存"
      diaWidth="85"
      footerTop="10"
      :footerShow="false"
    >
      <template #content>
        <div class="content-wrap">
          <el-form
            ref="form"
            :model="formData"
            :rules="rules"
            :inline="true"
            label-width="130px"
          >
            <el-form-item label="涉废类型：">
              <el-select
                v-model="formData.wastetype"
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in wasteList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="开始时间：">
              <el-date-picker
                v-model="formData.startdate"
                type="date"
                clearable
                placeholder="请选择"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>

            <el-form-item label="结束时间：">
              <el-date-picker
                v-model="formData.enddate"
                type="date"
                clearable
                placeholder="请选择"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                :icon="ArrowLeft"
                style="margin-left: 10px; background-color: #0874fa"
                @click="getList"
                ><el-icon style="color: #fff; margin-right: 5px"
                  ><Search /></el-icon
                >查询</el-button
              >
            </el-form-item>
          </el-form>
          <div class="table-wrap data-wrap">
            <el-table
              :data="facilityList"
              border
              class="table-height"
              style="width: 100%"
            >
              <!-- <el-table-column type="selection" align="center" /> -->
              <el-table-column
                prop="devicename"
                align="center"
                label="设施名称"
              />
              <el-table-column prop="wastetype" align="center" label="涉废类型">
                <template #default="{ row }">
                  <div>
                    {{
                      wasteList.find((item) => item.value == row.wastetype)
                        ?.label
                    }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="wastecode"
                align="center"
                label="危废代码"
              />
              <el-table-column
                prop="committime"
                align="center"
                label="更换时间"
                width="260"
              />
              <el-table-column prop="wastenum" align="center" label="更换量">
                <template #default="{ row }">
                  <div>
                    {{ row.wastenum + "kg" }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="putinnum" align="center" label="填充量">
                <template #default="{ row }">
                  <div>
                    {{ row.putinnum + "kg" }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="circledays"
                align="center"
                label="使用周期"
              >
                <template #default="{ row }">
                  <div>
                    {{ row.circledays + "天" }}
                  </div>
                </template>
              </el-table-column>
              <!-- <el-table-column prop="name" align="center" label="状态" /> -->

              <el-table-column label="操作" width="260" align="center">
                <template #default="{ row }">
                  <div class="btn-wrap">
                    <button
                      class="change-btn"
                      @click="handelDetail(row.id, row.customername)"
                    >
                      详情
                    </button>
                    <button class="record-btn" @click="editDetail(row)">
                      编辑
                    </button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div style="padding-right: 60px; margin-top: 20px">
              <Pagination
                v-model:currentPage="formData.currentPage"
                :total="total"
                v-model:page-size="formData.pageSize"
              />
            </div>
          </div>
        </div>
      </template>
    </Dialog>
    <DialogDetail
      diaTop="16"
      headerName="记录详情"
      v-model:showDialog="recordFlag"
      saveLetter="保存"
      diaWidth="60"
      footerTop="10"
      :footerShow="false"
    >
      <template #content>
        <div class="dia-record-detail">
          <div class="line">
            <div class="left-name">企业名称：{{ enterpriseName }}</div>
            <div class="right-name">
              设施名称：{{ deviceDetail.devicename }}
            </div>
          </div>
          <div class="line">
            <div class="left-name">设施编号：{{ deviceDetail.devicecode }}</div>
            <div class="right-name">
              涉废类型：{{
                wasteList.find((item) => item.value == deviceDetail.wastetype)
                  ?.label
              }}
            </div>
          </div>
          <div class="line">
            <div class="left-name">涉废代码：{{ deviceDetail.wastecode }}</div>
            <div class="right-name">更换量：{{ deviceDetail.putoutnum }}kg</div>
          </div>
          <div class="line">
            <div class="left-name">填充量：{{ deviceDetail.putinnum }}kg</div>
            <div class="right-name">碘值：{{ deviceDetail.dianval }}</div>
          </div>
          <!--                     -->
          <div class="line">
            <div class="left-name">
              使用周期：{{ deviceDetail.circledays }}天
            </div>
            <div class="right-name">
              本次更换时间：{{ deviceDetail.committime }}
            </div>
          </div>
          <div class="line">
            <div class="left-name">
              预计更换时间：{{ deviceDetail.nextchangedate }}
            </div>
            <div class="right-name">
              更换前照片：<button
                @click="searchImage(deviceDetail.changebeforeimgurl)"
              >
                点击查看
              </button>
            </div>
          </div>
          <div class="line">
            <div class="left-name">
              更换中照片：<button
                @click="searchImage(deviceDetail.changemidimgurl)"
              >
                点击查看
              </button>
            </div>
            <div class="right-name">
              更换后照片：<button
                @click="searchImage(deviceDetail.changeafterimgurl)"
              >
                点击查看
              </button>
            </div>
          </div>
          <div class="line">
            <div class="left-name">
              碘值监测报告图片：<button
                @click="searchImage(deviceDetail.imgdianvalurl)"
              >
                点击查看
              </button>
            </div>
            <div class="right-name">
              相关发票图片：<button
                @click="searchImage(deviceDetail.imgticketurl)"
              >
                点击查看
              </button>
            </div>
          </div>
          <div class="line">
            <div class="left-name">
              入库暂存图片：<button
                @click="searchImage(deviceDetail.imgstockkeepurl)"
              >
                点击查看
              </button>
            </div>
          </div>
        </div>
      </template>
    </DialogDetail>
    <!-- 图片预览 -->
    <el-image-viewer
      v-if="showImg"
      @close="showImg = false"
      :url-list="srcList"
    />
  </div>
</template>
<script setup>
import Dialog from "@/components/DialogCross";
import DialogDetail from "@/components/Dialog";
import Upload from "@/components/Upload";
import http from "@http";
import ElMessage from "@msg";
let props = defineProps([
  "showDialog",
  "devicecode",
  "enterpriseid",
  "wasteList",
  "updateNum",
]);
let emit = defineEmits(["update:showDialog", "save", "edit"]);
let recordFlag = ref(false);
let formData = reactive({ pgae: 1, pagesize: 10 });
let showImg = ref(false);
let srcList = ref([]);
let pagiFacilityParams = reactive({});
let pagiFacilityTotal = ref(1);
let enterpriseName = ref("");
let total = ref(1);
let deviceDetail = ref({});
let facilityList = ref([]);

let wasteList = ref([]);
watch(
  () => props.updateNum,
  (newVal) => {
    console.log(newVal, "newVal");
  },
  { deep: true }
);
watch(
  () => props,
  (newVal) => {
    wasteList.value = newVal.wasteList;
    formData.devicecode = newVal.devicecode;
    formData.enterpriseid = newVal.enterpriseid;
    getList();
  },
  { deep: true }
);
let searchImage = (url) => {
  if (!url) {
    ElMessage({ msg: "暂无图片", type: "warning" });
    return;
  }
  showImg.value = true;
  srcList.value = url.split(',')
  console.log(url,'uel');
};
let close = () => {
  console.log("-=-=");
  emit("update:showDialog", false);
};
let save = () => {
  emit("save");
};
let handelDetail = (id, name) => {
  enterpriseName.value = name;
  recordFlag.value = true;
  http({ url: "/stock/detail", data: { id } }).then((res) => {
    if (res.code == 0) {
      deviceDetail.value = res.data;
    }
  });
};
let editDetail = (row) => {
  row.wastetype = String(row.wastetype);
  emit("edit", row);
};
let rules = {
  enterpriseName: [
    {
      required: true,
      message: "企业名称不能为空",
      trigger: "blur",
    },
  ],
};
let getList = () => {
  http({ url: "/stock/datalist", data: { ...formData } }).then((res) => {
    if (res.code == 0) {
      facilityList.value = res.data.list;
      total.value = res.data.total;
      ElMessage({ msg: "查询成功" });
    }
  });
};
</script>
<style lang="scss" scoped>
/* 编辑企业详情页面 */
.recordDetail {
  .dia-record-detail {
    .line {
      display: flex;
      justify-content: space-between;
      padding-left: 70px;
      padding-right: 50px;
      margin-top: 30px;
      .left-name {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 24px;
        flex: 1;
        color: #333333;
        button {
          color: #0874fa;
          font-weight: 400;
          font-size: 24px;
        }
      }
      .right-name {
        flex: 1;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 24px;
        color: #333333;
        margin-left: 130px;
        text-align: left;
        display: flex;

        button {
          color: #0874fa;
          font-weight: 400;
          font-size: 24px;
        }
      }
    }
  }
  .content-wrap {
    padding-right: 10px;
    .data-wrap {
      height: 72vh;
      overflow-y: scroll;
      .table-height {
        height: 64vh;
      }
      .btn-wrap {
        display: flex;
        justify-content: space-between;
        padding-left: 19px;

        padding-right: 17px;
        button {
          width: 89px;
          height: 37px;
          border-radius: 4px;

          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 19px;
        }
        .change-btn {
          color: #0874fa;
          background-color: #cee3fe;
        }
        .record-btn {
          color: #fa8508;
          background-color: #fee7ce;
        }
      }
    }
    .qr-code {
      width: 826px;
      height: 263px;
      background: #ffffff;
      border-radius: 5px;
      border: 1px solid #bfbfbf;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .content {
        display: flex;
        flex-direction: column;
        img {
          width: 190px;
          height: 182px;
        }
        button {
          margin-top: 5px;

          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 20px;
          color: #0874fa;
        }
      }
    }
  }

  :deep(.el-form-item__label) {
    font-family: Source Han Sans CN;
    font-weight: 500 !important;
    font-size: 20px !important;
    color: #000 !important;
  }
  :deep(.el-input) {
    width: auto;

    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 18px;
    color: #666666 !important;
  }
  :deep(.el-input__inner) {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 18px;
    color: #666666;
  }
  :deep(.el-input__wrapper, .el-textarea__inner) {
    box-shadow: none;
    font-family: Source Han Sans CN;
    font-weight: 400 !important;
    font-size: 18px !important;
    color: #666666 !important;
    background: #fff !important;
    border-radius: 5px !important;
    border: 1px solid #bfbfbf !important;

    height: 37px !important;
  }
  :deep(.el-input__inner::placeholder) {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 18px;
    color: #999999;
  }
  :deep(.el-table thead tr > th) {
    height: 60px !important;
    background: #f9fafe !important;
    font-family: Source Han Sans CN;
    font-weight: 500 !important;
    font-size: 21px !important;
    color: #333333 !important;
  }

  :deep(.el-pagination) {
    .is-active,
    .number {
      width: 33px;
      height: 33px;
      background: #007cff;
    }

    :deep(.el-pagination__goto, .el-pagination__classifier) {
      color: #666;
      font-weight: 400;
      font-size: 21px;
    }

    :deep(.el-input__inner) {
      color: #666;
      font-size: 21px !important;
      width: 20px;
    }
    :deep(.el-pagination__total) {
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 21px;
      color: #666666;
    }

    .el-pagination.is-background .btn-next,
    .el-pagination.is-background .btn-prev {
      background: transparent !important;

      font-size: 21px;
      width: 30px !important;
      height: 30px !important;
    }

    .el-pagination.is-background .btn-next.is-active,
    .el-pagination.is-background .btn-prev.is-active,
    .el-pagination.is-background .el-pager li.is-active {
      color: #666 !important;
      font-size: 21px;
    }
  }
  :deep(.el-dialog__header) {
    padding-bottom: 0px !important ;
  }
  :deep(.el-button--primary) {
    font-size: 16px;
    height: 36px !important;
    line-height: 36px !important;
    background-color: #0874fa !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
}
</style>
